<template>
	<view class="fu-p-30">
		<demo-desc>
			此组件一般用于标识页面底部加载数据时的状态
		</demo-desc>
		
		<fu-section title="基本案例" customClass="fu-m-t-20" type="line">
			<fu-loading-more :loadingType="1"></fu-loading-more>
		</fu-section>
		
		<fu-section title="圆形Loading" customClass="fu-m-t-20" type="line">
			<fu-loading-more mode="circle" :loadingType="1"></fu-loading-more>
		</fu-section>
		
		<fu-section title="翻转Loading" customClass="fu-m-t-20" type="line">
			<fu-loading-more mode="over" :loadingType="1"></fu-loading-more>
		</fu-section>
		
		<fu-section title="自定义颜色" customClass="fu-m-t-20" type="line">
			<fu-loading-more mode="circle" :loadingType="1" color="#2979ff"></fu-loading-more>
		</fu-section>
		
		<fu-section title="自定义文字" customClass="fu-m-t-20" type="line">
			<fu-loading-more :loadingType="1" :contentText="contentText"></fu-loading-more>
		</fu-section>
	</view>
</template>

<script setup>
	import { reactive } from 'vue';
	
	// data数据
	const contentText = reactive({
		contentdown: "上拉显示更多",
		contentrefresh: "加载中",
		contentnomore: "没有更多了"
	});
</script>

<style>	
</style>